<template>
    <div class="complain-page">
        <!-- 顶部导航 -->

        <TopNav
                title="我的银行卡"
                rightText="添加"
                :rightParams="{ courseId: 123 }"
                :showBack="true"
                :showAdd="true"
                @rightClick="goAddComplain"
        />


        <!-- 页面内容 -->
        <div class="content">
            <div class="empty-tip" v-if="bankList.length === 0">
                暂无银行卡
            </div>

            <!-- 列表 -->
            <div class="list-container">

                <div class="bank-card-list">
                    <div v-for="(card, index) in bankList" :key="index" class="bank-card-item" @click="goView(card)">
                        <div class="bank-card-name">{{ card.bankName }}</div>
                        <div class="bank-card-number">{{ maskCardNumber(card.cardNumber) }}</div>
                        <div class="bank-card-type">{{ card.cardType || '储蓄卡' }}</div>
                    </div>
                </div>

            </div>


        </div>
    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import { getBankList } from '@/api/index.js'
    export default {
        name: "ComplainPage",
        components: {
            TopNav // 注册
        },
        data() {
            return {
                bankList: [

                ]
            }
        },
        methods: {
            formatCardNumber(number) {
                if(!number) return '';
                return number.replace(/\s?/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
            },
            maskCardNumber(number) {
                if(!number) return '';
                const last4 = number.slice(-4);
                return "****  ****  ****  " + last4;
            },
            goBack() {
                this.$router.back();
            },
            addComplain() {
                alert("跳转到新增投诉页面");
            },
            goAddComplain(params) {
                console.log("跳转参数：", params);
                const queryString = new URLSearchParams(params).toString();

                this.$router.push(`/profile/bankCard/AddBankCard?${queryString}`);
            },
            async getBankList(){
                const res = await getBankList();
                console.log('res===',res)
                if(res.code == 200){

                    this.bankList = res.data;
                }
            },
            goView(card){
                this.$router.push(`/profile/bankCardDetail?bankId=${card.id}`);
            }
        },
        mounted() {
            this.getBankList()
        }
    };
</script>

<style scoped>
    .complain-page {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    /* 页面内容 */
    .content {
        padding: 12px;
    }

    .empty-tip {
        text-align: center;
        color: #999;
        font-size: 14px;
        padding-top: 40px;
    }






    .bank-card-list {
        padding: 10px;
    }

    .bank-card-item {
        background: linear-gradient(135deg, #4a90e2, #50aee5);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 10px;
        border: 1px solid #eee;
    }

    .bank-card-name {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
    }

    .bank-card-number {
        font-size: 18px;
        margin: 6px 0;
        color: #fff;
        letter-spacing: 1px;
    }

    .bank-card-type {
        font-size: 12px;
        color: #fff;
    }


</style>
